<template>
  <div class="credit-center">
    <el-row :gutter="20" v-if="isCreditDashboardRoute">
      <!-- 信用分展示 -->
      <el-col :span="8">
        <el-card class="credit-score">
          <template #header>
            <div class="card-header">
              <span>我的信用分</span>
            </div>
          </template>
          <div class="score-content">
            <div class="score-circle">
              <el-progress
                type="dashboard"
                :percentage="creditScore / 10"
                :color="scoreColor"
              >
                <template #default="{ percentage }">
                  <div class="score-value">
                    <span class="number">{{ percentage }}</span>
                    <span class="label">分</span>
                  </div>
                </template>
              </el-progress>
            </div>
            <div class="score-info">
              <p>信用等级：{{ creditLevel }}</p>
              <p>更新时间：{{ updateTime }}</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 信用权益 -->
      <el-col :span="16">
        <el-card class="credit-benefits">
          <template #header>
            <div class="card-header">
              <span>信用权益</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8" v-for="benefit in benefits" :key="benefit.id">
              <div class="benefit-item">
                <el-icon :size="32" :color="benefit.color">
                  <component :is="benefit.icon" />
                </el-icon>
                <h3>{{ benefit.title }}</h3>
                <p>{{ benefit.desc }}</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 推荐服务 -->
    <el-card class="recommended-services" v-if="isCreditDashboardRoute">
      <template #header>
        <div class="card-header">
          <span>推荐服务</span>
        </div>
      </template>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="热门商品" name="products">
          <el-row :gutter="20">
            <el-col :span="6" v-for="product in products" :key="product.id">
              <el-card class="product-card" shadow="hover">
                <img :src="product.image" class="product-image" />
                <h3>{{ product.name }}</h3>
                <p class="price">¥{{ product.price }}</p>
                <el-button type="primary" size="small">立即购买</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="精选房源" name="houses">
          <el-row :gutter="20">
            <el-col :span="8" v-for="house in houses" :key="house.id">
              <el-card class="house-card" shadow="hover">
                <img :src="house.image" class="house-image" />
                <h3>{{ house.title }}</h3>
                <p class="location">{{ house.location }}</p>
                <p class="price">¥{{ house.price }}/月</p>
                <el-button type="primary" size="small">查看详情</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="特惠酒店" name="hotels">
          <el-row :gutter="20">
            <el-col :span="8" v-for="hotel in hotels" :key="hotel.id">
              <el-card class="hotel-card" shadow="hover">
                <img :src="hotel.image" class="hotel-image" />
                <h3>{{ hotel.name }}</h3>
                <p class="location">{{ hotel.location }}</p>
                <p class="price">¥{{ hotel.price }}/晚</p>
                <el-button type="primary" size="small">立即预订</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <router-view />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  ShoppingCart,
  House,
  Van,
  FirstAidKit,
  Location,
  Present
} from '@element-plus/icons-vue'

const route = useRoute()

const isCreditDashboardRoute = computed(() => {
  return route.path === '/credit' || route.path === '/credit/';
});

// 信用分数据
const creditScore = ref(720)
const updateTime = ref('2024-03-20 10:00:00')

// 信用等级
const creditLevel = computed(() => {
  if (creditScore.value >= 700) return '优秀'
  if (creditScore.value >= 600) return '良好'
  if (creditScore.value >= 500) return '一般'
  return '较差'
})

// 信用分颜色
const scoreColor = computed(() => {
  if (creditScore.value >= 700) return '#67C23A'
  if (creditScore.value >= 600) return '#409EFF'
  if (creditScore.value >= 500) return '#E6A23C'
  return '#F56C6C'
})

// 信用权益
const benefits = [
  {
    id: 1,
    title: '信用购物',
    desc: '享受免押金、分期付款等特权',
    icon: 'ShoppingCart',
    color: '#409EFF'
  },
  {
    id: 2,
    title: '便利租赁',
    desc: '免押金租房、租车等服务',
    icon: 'House',
    color: '#67C23A'
  },
  {
    id: 3,
    title: '交通出行',
    desc: '公交地铁信用支付',
    icon: 'Van',
    color: '#E6A23C'
  },
  {
    id: 4,
    title: '医疗健康',
    desc: '信用就医、免押金挂号',
    icon: 'FirstAidKit',
    color: '#F56C6C'
  },
  {
    id: 5,
    title: '停车服务',
    desc: '信用停车、自动扣费',
    icon: 'Location',
    color: '#909399'
  },
  {
    id: 6,
    title: '公益活动',
    desc: '参与公益、提升信用',
    icon: 'Present',
    color: '#9B59B6'
  }
]

// 推荐服务
const activeTab = ref('products')

// 模拟数据
const products = [
  {
    id: 1,
    name: '智能手表',
    price: 999,
    image: 'https://via.placeholder.com/200x200'
  },
  {
    id: 2,
    name: '无线耳机',
    price: 699,
    image: 'https://via.placeholder.com/200x200'
  },
  {
    id: 3,
    name: '智能音箱',
    price: 399,
    image: 'https://via.placeholder.com/200x200'
  },
  {
    id: 4,
    name: '智能门锁',
    price: 1299,
    image: 'https://via.placeholder.com/200x200'
  }
]

const houses = [
  {
    id: 1,
    title: '精装两居室',
    location: '西湖区',
    price: 3500,
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 2,
    title: '豪华三居室',
    location: '上城区',
    price: 5000,
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 3,
    title: '温馨一居室',
    location: '下城区',
    price: 2500,
    image: 'https://via.placeholder.com/200x200'
  }
]

const hotels = [
  {
    id: 1,
    name: '西湖大酒店',
    location: '西湖区',
    price: 688,
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 2,
    name: '城市花园酒店',
    location: '上城区',
    price: 488,
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 3,
    name: '商务中心酒店',
    location: '下城区',
    price: 388,
    image: 'https://via.placeholder.com/300x200'
  }
]
</script>

<style scoped>
.credit-center {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.credit-score {
  margin-bottom: 20px;
}

.score-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-circle {
  margin-bottom: 20px;
}

.score-value {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-value .number {
  font-size: 36px;
  font-weight: bold;
  color: #303133;
}

.score-value .label {
  font-size: 14px;
  color: #909399;
}

.score-info {
  text-align: center;
}

.score-info p {
  margin: 5px 0;
  color: #606266;
}

.benefit-item {
  text-align: center;
  padding: 20px;
}

.benefit-item h3 {
  margin: 10px 0;
  font-size: 16px;
  color: #303133;
}

.benefit-item p {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

.recommended-services {
  margin-top: 20px;
}

.product-card,
.house-card,
.hotel-card {
  margin-bottom: 20px;
  text-align: center;
}

.product-image,
.house-image,
.hotel-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

.location {
  color: #909399;
  font-size: 14px;
  margin: 5px 0;
}
</style> 